<script setup lang="ts">
import { useAppStore } from '@/stores/app'

const { sidebar, toggleSidebar } = useAppStore()
</script>

<template>
  <div class="hamburger-container">
    <svg-icon
      icon-name="ant-design:bars-outlined"
      custom-class="hamburger cursor-pointer"
      :class="{ 'rotate-180': sidebar.opened }"
      @click="toggleSidebar"
    ></svg-icon>
  </div>
</template>

<style scoped lang="scss">
.hamburger-container {
  @apply leading-[50px] float-left cursor-pointer px-10px hover:(bg-black/5);
}
.hamburger {
  @apply w-30px h-30px transition-transform duration-300;
}
</style>
